<template>
  <div v-loading="loading">
    <el-card :body-style="{padding:'10px'}" style="min-height: 680px;background-color: #f3f3f3">
      <!-------------------------------按钮 ----------------------down------------------->
      <el-row :gutter="24">
        <el-col :span="21">
          <el-button type="info" @click="quality={ qc: 5, entitys: [{}, {}, {}, {}, {}], measurement: '合格' }">新建</el-button>
          <el-button type="success" @click="saveEdit">保存</el-button>
        </el-col>
        <el-col :span="3">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
            <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
          </el-button-group>
        </el-col>
      </el-row>
      <!------------------------------按钮 ----------------------up ------------------->
      <!--------------------------------产品查询 down------------------------------------------------------>
      <el-dialog :visible.sync="editVisible" width="60%" :close-on-click-modal="false">
        <el-row :gutter="20" style="margin: 10px">
          <el-col :span="6">
            <el-input v-model="query.code" placeholder="产品编码" />
          </el-col>
          <el-col :span="6">
            <el-input v-model="query.name" placeholder="产品名称" />
          </el-col>
          <el-col :span="6">
            <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="page.content"
          tooltip-effect="dark"
          border
          style="width: 100%;"
          @row-click="selTable"
        >
          <el-table-column
            type="index"
            label="项次"
            width="50"
          />
          <el-table-column
            prop="cInvCode"
            label="产品编码"
          />
          <el-table-column
            prop="cInvName"
            label="产品名称"
          />
          <el-table-column
            prop="cInvStd"
            label="产品规格"
          />
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="page.totalElements"
            @current-change="handlePageChange"
          />
        </div>
      </el-dialog>
      <!--------------------------------产品查询 up------------------------------------------------------>
      <!------------------------------选择单据 ----------------------up------------------>
      <!------------------------------填写质检数据 ----------------------down------------------>
      <div>
        <el-row style="background-color: #fefefe">
          <el-col :span="15">
            <el-descriptions border style="margin-bottom: 5px">
              <el-descriptions-item label="方案名称" label-style="width:8%" content-style="width:20%">{{ quality.projectName }}</el-descriptions-item>
              <el-descriptions-item label="备注" :span="2" label-style="width:8%" content-style="width:23%">{{ quality.remark }}</el-descriptions-item>
              <el-descriptions-item label="产品编码" label-style="width:8%" content-style="width:23%">
                <span style="text-align: left;color: #81a4ff;font-weight: bold;font-size: 18px">{{ quality.cinvcode }}</span>
                <el-button style="float: right" type="primary" size="mini" @click="editVisible=true">选择</el-button>
              </el-descriptions-item>
              <el-descriptions-item label="产品名称" label-style="width:8%" content-style="width:23%">{{ quality.cinvname }}</el-descriptions-item>
              <el-descriptions-item label="产品规格" label-style="width:8%" content-style="width:23%">{{ quality.cinvstd }}</el-descriptions-item>
              <el-descriptions-item label="库存数量" label-style="width:8%" content-style="width:23%">
                <el-input-number v-model="quality.iqty" :min="1" :controls="false" @change="setIqty" />
              </el-descriptions-item>
              <el-descriptions-item label="版本" label-style="width:8%" content-style="width:23%">
                <el-select v-model="quality.version" placeholder="请选择" @change="selVersion">
                  <el-option
                    v-for="item in this.projects"
                    :key="item.version"
                    :label="item.version"
                    :value="item.id"
                  />
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="质检等级" label-style="width:8%" content-style="width:23%">{{ quality.level }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="3">
            <div style="text-align: center">AQL值</div>
            <el-descriptions border style="margin-bottom: 5px" :column="1">
              <el-descriptions-item label="A" label-style="width:8%" content-style="width:23%">
                <el-select v-model="quality.aqla" placeholder="请选择" @change="changeAqla">
                  <el-option
                    v-for="item in grades"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="B" label-style="width:8%" content-style="width:23%">
                <el-select v-model="quality.aqlb" placeholder="请选择" @change="changeAqlb">
                  <el-option
                    v-for="item in grades"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="C" label-style="width:8%" content-style="width:23%">
                <el-select v-model="quality.aqlc" placeholder="请选择" @change="changeAqlc">
                  <el-option
                    v-for="item in grades"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="3">
            <div style="text-align: center">AC值</div>
            <el-descriptions border style="margin-bottom: 5px" :column="1">
              <el-descriptions-item label="AC/A" label-style="width:8%" content-style="width:23%">
                {{ quality.aca }}
              </el-descriptions-item>
              <el-descriptions-item label="AC/B" label-style="width:8%" content-style="width:23%">
                {{ quality.acb }}
              </el-descriptions-item>
              <el-descriptions-item label="AC/C" label-style="width:8%" content-style="width:23%">
                {{ quality.acc }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="3">
            <div style="text-align: center">RE值</div>
            <el-descriptions border style="margin-bottom: 5px" :column="1">
              <el-descriptions-item label="RE/A" label-style="width:8%" content-style="width:23%">
                {{ quality.rea }}
              </el-descriptions-item>
              <el-descriptions-item label="RE/B" label-style="width:8%" content-style="width:23%">
                {{ quality.reb }}
              </el-descriptions-item>
              <el-descriptions-item label="RE/C" label-style="width:8%" content-style="width:23%">
                {{ quality.rec }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
      <!-------------------------------按钮 ----------------------up ------------------->
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="质检内容" name="质检内容">
          <el-table
            :data="quality.entitys"
            tooltip-effect="dark"
            border
            style="width: 100%;"
          >
            <el-table-column
              type="index"
              label="项次"
              width="50"
            />
            <el-table-column
              prop="planName"
              width="150px"
              label="测试项目"
            />
            <el-table-column
              prop="quotaName"
              width="150px"
              label="测试指标"
            />
            <el-table-column
              prop="specs"
              width="150px"
              label="规格"
            />
            <el-table-column
              prop="grade"
              width="80px"
              label="等级"
            />
            <el-table-column
              prop="no1"
              width="120px"
              label="NO.1"
            >
              <template slot-scope="scope">
                <el-select v-if="scope.row.type === '字符'" v-model="scope.row.no1" :disabled="scope.row.qc<1" placeholder="请选择" >
                  <el-option
                    v-for="item in ['符合', '不符合']"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-input-number v-if="scope.row.type === '数值'" v-model="scope.row.no1" style="width: 100px" :min="0" :controls="false" :disabled="scope.row.qc<1"  />
              </template>
            </el-table-column>
            <el-table-column
              prop="no2"
              width="120px"
              label="NO.2"
            >
              <template slot-scope="scope">
                <el-select v-if="scope.row.type === '字符'" v-model="scope.row.no2" :disabled="scope.row.qc<2" placeholder="请选择" >
                  <el-option
                    v-for="item in ['符合', '不符合']"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-input-number v-if="scope.row.type === '数值'" v-model="scope.row.no2" style="width: 100px" :min="0" :controls="false" :disabled="scope.row.qc<2"  />
              </template>
            </el-table-column>
            <el-table-column
              prop="no3"
              width="120px"
              label="NO.3"
            >
              <template slot-scope="scope">
                <el-select v-if="scope.row.type === '字符'" v-model="scope.row.no3" :disabled="scope.row.qc<3" placeholder="请选择" >
                  <el-option
                    v-for="item in ['符合', '不符合']"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-input-number v-if="scope.row.type === '数值'" v-model="scope.row.no3" style="width: 100px" :min="0" :controls="false" :disabled="scope.row.qc<3"  />
              </template>
            </el-table-column>
            <el-table-column
              prop="no4"
              width="120px"
              label="NO.4"
            >
              <template slot-scope="scope">
                <el-select v-if="scope.row.type === '字符'" v-model="scope.row.no4" :disabled="scope.row.qc<4" placeholder="请选择" >
                  <el-option
                    v-for="item in ['符合', '不符合']"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
                <el-input-number v-if="scope.row.type === '数值'" v-model="scope.row.no4" style="width: 100px" :min="0" :controls="false" :disabled="scope.row.qc<4"  />
              </template>
            </el-table-column>
            <el-table-column
              prop="A"
              width="70px"
              label="A"
            >
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.pda" v style="width: 50px" :min="0" :controls="false" @change="panduan" />
              </template>
            </el-table-column>
            <el-table-column
              prop="B"
              width="70px"
              label="B"
            >
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.pdb" v style="width: 50px" :min="0" :controls="false" @change="panduan" />
              </template>
            </el-table-column>
            <el-table-column
              prop="C"
              width="70px"
              label="C"
            >
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.pdc" v style="width: 50px" :min="0" :controls="false" @change="panduan" />
              </template>
            </el-table-column>
            <el-table-column
              prop="judge"
              width="90px"
              label="系统"
            />
            <el-table-column
              prop="result"
              width="110px"
              label="人工"
            >
              <template slot-scope="scope">
                <el-select v-model="scope.row.result" placeholder="请选择" @change="selVersion">
                  <el-option
                    v-for="item in ['合格', '不合格']"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              width="320px"
              label="备注"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="图片上传" name="图片上传">
          <el-upload
            :action="fileUploadURL"
            list-type="picture-card"
            :on-success="handleUploadSuccess"
            :on-preview="handlePictureCardPreview"
            :on-exceed="handleExceed"
            :limit="6"
            :file-list="filList"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-tab-pane>
      </el-tabs>

      <!------------------------------填写质检数据 ----------------------up------------------>

      <el-card v-show="active === 3">
        <el-upload
          :action="fileUploadURL"
          list-type="picture-card"
          :on-success="handleUploadSuccess"
          :on-preview="handlePictureCardPreview"
          :on-exceed="handleExceed"
          :limit="3"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-card>
      <el-card>
        <el-descriptions border>
          <el-descriptions-item label="总检" label-style="width:2%" content-style="width:20%">
            <template>
              <el-radio-group v-model="quality.measurement">
                <el-radio label="合格">合格</el-radio>
                <el-radio label="不合格">不合格</el-radio>
              </el-radio-group>
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-card>
  </div>
</template>
<script>
import { save } from '@/api/qcstock'
import { query as u8query } from '@/api/u8Product'
import { getByCInvCode } from '@/api/project'
import { get as getQcStock } from '@/api/qcstock'
import { get } from '@/api/qmilcode'
import { getNext } from '@/api/qcstock'
import { getLast } from '@/api/qcstock'
export default {
  name: 'QcStockEdit',
  data() {
    return {
      loading: false,
      filList: [],
      activeName: '质检内容',
      fileURL: process.env.VUE_APP_BASE_API,
      fileUploadURL: process.env.VUE_APP_BASE_API + '/file/upload',
      fileList: [],
      file: '',
      dialogVisible: false,
      dialogImageUrl: '',
      grades: [0.25, 0.4, 0.65, 1.0, 1.5, 2.5, 4.0, 6.5, 10, 15, 25],
      active: 1,
      editVisible: false,
      quality: { qc: 5, entitys: [{}, {}, {}, {}, {}], measurement: '合格' },
      query: {},
      page: {},
      form: {},
      projects: []
    }
  },
  created() {
    if (this.$route.query.id) { this.getOutCome(this.$route.query.id) }
    this.handleSearch()
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getOutCome(id) {
      this.loading = true
      getQcStock(id).then(res => {
        this.loading = false
        this.quality = res.data.data
        this.filList = []
        for (const image of this.quality.images) {
          this.filList.push({ url: this.fileURL + image.imgUrl })
        }
        console.log(this.filList)
      })
    },
    handleRemove(file, fileList) {
      const images = []
      for (const image of fileList) {
        if (image.response) {
          images.push({ imgUrl: image.response.data.data })
        } else {
          images.push({ imgUrl: image.url.replace(this.fileURL, '') })
        }
      }
      this.quality.images = images
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleExceed() {
      this.$message({
        showClose: true,
        message: '超出限定图片上传个数',
        type: 'error'
      })
    },
    handleUploadSuccess(res, file, fileList) {
      const images = []
      for (const image of fileList) {
        if (image.response) {
          images.push({ imgUrl: image.response.data.data })
        } else {
          images.push({ imgUrl: image.url.replace(this.fileURL, '') })
        }
      }
      this.quality.images = images
      console.log(this.quality.images)
    },
    check() {
      for (const row of this.quality.entitys) {
        row.judge = '合格'
        console.log(row)
        if (row.type === '字符') {
          if (row.qc >= 1 && row.no1 && row.no1 !== '符合') {
            row.result = row.judge = '不合格'
            continue
          }
          if (row.qc >= 2 && row.no2 && row.no2 !== '符合') {
            row.result = row.judge = '不合格'
            continue
          }
          if (row.qc >= 3 && row.no3 && row.no3 !== '符合') {
            row.result = row.judge = '不合格'
            continue
          }
          if (row.qc >= 4 && row.no4 && row.no4 !== '符合') {
            row.result = row.judge = '不合格'
            continue
          }
          if (row.qc >= 5 && row.no5 && row.no5 !== '符合') {
            row.result = row.judge = '不合格'
            continue
          }
        } else if (row.type === '数值') {
          if (row.qc >= 1 && row.no1 && (row.miniVal > row.no1 || row.no1 > row.maxVal)) {
            row.result = row.judge = '不合格'
            continue
          }
          if (row.qc >= 2 && row.no2 && (row.miniVal > row.no2 || row.no2 > row.maxVal)) {
            row.result = row.judge = '不合格'
            continue
          }
          if (row.qc >= 3 && row.no3 && (row.miniVal > row.no3 || row.no3 > row.maxVal)) {
            row.result = row.judge = '不合格'
            continue
          }
          if (row.qc >= 4 && row.no4 && (row.miniVal > row.no4 || row.no4 > row.maxVal)) {
            row.result = row.judge = '不合格'
            continue
          }
          if (row.qc >= 5 && row.no5 && (row.miniVa > row.no5 || row.no5 > row.maxVal)) {
            row.result = row.judge = '不合格'
            continue
          }
        }
        row.result = '合格'
      }
      this.quality = JSON.parse(JSON.stringify(this.quality))
    },
    saveEdit() {
      if (!this.quality.measurement) {
        this.$message.warning('请填写总评')
        return
      }
      this.loading = true
      save(this.quality).then(res => {
        this.loading = false
        this.$message.success(res.message)
        this.$router.push({ path: 'qcStockEdit', query: { id: res.data.data.id }})
        if (this.$route.query.id) {
          this.getOutCome(this.$route.query.id)
        }
      })
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1)
      this.getData()
    },
    getData() {
      u8query(this.query).then(res => {
        this.page = res.data.page
      })
    },
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val)
      this.getData()
    },
    selTable(row) {
      this.form = row
      this.editVisible = false
      this.getProject(this.form.cInvCode)
    },
    getMode(level, qty, grade) {
      const data = { level: level, qty: qty, grade: grade }
      get(data).then(res => {
        this.qc = res.data.data.qc
        this.quality.qc = res.data.data.qc
        this.quality.ac = res.data.data.ac
        this.quality.re = res.data.data.re
        this.quality = JSON.parse(JSON.stringify(this.quality))
      })
    },
    getProject(cinvcode) {
      getByCInvCode(cinvcode).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.projects = res.data.data
          const data = res.data.data[res.data.data.length - 1]
          this.setQuality(data)
        } else {
          this.$message({
            showClose: true,
            message: '该产品还没有方案',
            type: 'error'
          })
        }
      })
    },
    setGrade() {
      for (let i = 0; i < this.quality.entitys.length; i++) {
        const item = this.quality.entitys[i]
        const data = { level: this.quality.level, qty: this.quality.iqty, grade: item.grade }
        get(data).then(res => {
          console.log(res)
          item.qc = res.data.data.qc
          item.ac = res.data.data.ac
          item.re = res.data.data.re
          this.quality.entitys[i] = item
          this.quality = JSON.parse(JSON.stringify(this.quality))
        })
      }
    },
    setIqty() {
      this.setGrade()
      // this.getMode(this.quality.level, this.quality.iqty, this.quality.grade)
    },
    setQuality(data) {
      const target = {}
      target.ccuscode = this.form.cCusCode
      target.ccusname = this.form.cCusName
      target.cdepname = this.form.cDepName
      target.cdepcode = this.form.cDepCode
      target.cdlcode = this.form.cDLCode
      target.level = data.level
      target.grade = data.grade
      target.cinvcode = data.cinvcode
      target.cinvname = data.cinvname
      target.cinvstd = data.cinvstd
      target.projectId = data.id
      target.projectDescribe = data.describe
      target.projectName = data.name
      target.version = data.version
      target.remark = data.remark
      target.entitys = []
      for (const item of data.entitys) {
        const ent = { quotaId: item.quota.id, quotaName: item.quota.name, type: item.type,
          planId: item.quota.basePlan.id, planName: item.quota.basePlan.name, specs: item.specs,
          judge: '合格', result: '合格', grade: item.grade,
          strVal: item.strVal, miniVal: item.miniVal, stanVal: item.stanVal, maxVal: item.maxVal }
        target.entitys.push(ent)
      }
      this.quality = target
      this.active = 2
    },
    selVersion(e) {
      for (const item of this.projects) {
        if (item.id === e) {
          this.setQuality(item)
          break
        }
      }
    },
    toNext() {
      getNext(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getOutCome(this.$route.query.id)
        }
      })
    },
    toLast() {
      getLast(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getOutCome(this.$route.query.id)
        }
      })
    },
    changeAqla() {
      const data = { level: this.quality.level, qty: this.quality.iqty, grade: this.quality.aqla }
      get(data).then(res => {
        this.quality.aca = res.data.data.ac
        this.quality.rea = res.data.data.re
        this.quality = JSON.parse(JSON.stringify(this.quality))
      })
    },
    changeAqlb() {
      const data = { level: this.quality.level, qty: this.quality.iqty, grade: this.quality.aqlb }
      get(data).then(res => {
        this.quality.acb = res.data.data.ac
        this.quality.reb = res.data.data.re
        this.quality = JSON.parse(JSON.stringify(this.quality))
      })
    },
    changeAqlc() {
      const data = { level: this.quality.level, qty: this.quality.iqty, grade: this.quality.aqlc }
      get(data).then(res => {
        this.quality.acc = res.data.data.ac
        this.quality.rec = res.data.data.re
        this.quality = JSON.parse(JSON.stringify(this.quality))
      })
    },
    panduan() {
      for (const row of this.quality.entitys) {
        row.judge = '合格'
        if (row.pda) {
          if (this.quality.aca) {
            if (row.pda >= this.quality.aca) {
              row.result = row.judge = '不合格'
              continue
            }
          }
        }
        if (row.pdb) {
          if (this.quality.acb) {
            if (row.pdb >= this.quality.acb) {
              row.result = row.judge = '不合格'
              continue
            }
          }
        }
        if (row.pdc) {
          if (this.quality.acc) {
            if (row.pdc >= this.quality.acc) {
              row.result = row.judge = '不合格'
              continue
            }
          }
        }
        row.result = '合格'
      }
      this.quality = JSON.parse(JSON.stringify(this.quality))
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
</style>
